<template>
  <div class="common-wrapper">
    <div class="common-search">
      <a-form layout="inline">
        <a-form-item label="部门">
          <a-tree-select
            v-model="search.department"
            style="width: 150px;"
            :dropdown-style="{ maxHeight: '400px',  overflow: 'auto' }"
            placeholder="请选择部门"
            allow-clear
            :tree-default-expand-all="false"
            :treeData="departmentList"
            :replaceFields="{children:'childs', title:'dep_name', key:'pkey', value: 'pkey' }"
          >
          </a-tree-select>
        </a-form-item>
        <a-form-item label="工种">
          <a-select v-model="search.work_type" mode="multiple" style="width:185px;">
            <a-select-option v-for="item in datadictionary" :key="item.data_value">
              {{ item.data_name }}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="员工姓名">
          <a-input v-model="search.name" />
        </a-form-item>
        <a-form-item label="员工工号">
          <a-input v-model="search.work_number" />
        </a-form-item>
        <a-form-item label="时间范围">
          <a-range-picker @change="onChange" />
        </a-form-item>
        <a-form-model-item>
        <a-button type="primary" @click="getTableData(1)" class="l-mg-r10"> 搜索 </a-button>
            <a-button @click="onDel" type="danger"  :disabled="!hasSelected"
              >删除</a-button
            >
          </a-form-model-item>
      </a-form>
    </div>
    <div class="common-main" ref="main">
      <a-table
        size="middle"
        rowKey="code"
        :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
        :columns="columns"
        :scroll="{ y: 500, x: 1200 }"
        :data-source="dataSource"
        bordered
        :pagination="pagination"
        :loading="loading"
        @change="handleTableChange"
      >
        <template slot="week" slot-scope="text">
          <span>{{ '星期' + text }}</span>
        </template>
        <template slot="plan1" slot-scope="text, record">
          <span>{{ record.shift_period_time[0].enable ? '√' : '×' }}</span>
        </template>
        <template slot="type1" slot-scope="text, record">
          <span>{{ record.shift_period_time[0].type_name }}</span>
        </template>
        <template slot="start1" slot-scope="text, record">
          <span>{{ record.shift_period_time[0].work_time }}</span>
        </template>
        <template slot="end1" slot-scope="text, record">
          <span>{{ record.shift_period_time[0].after_time }}</span>
        </template>
        <template slot="plan2" slot-scope="text, record">
          <span>{{ record.shift_period_time[1].enable ? '√' : '×' }}</span>
        </template>
        <template slot="type2" slot-scope="text, record">
          <span>{{ record.shift_period_time[1].type_name }}</span>
        </template>
        <template slot="start2" slot-scope="text, record">
          <span>{{ record.shift_period_time[1].work_time }}</span>
        </template>
        <template slot="end2" slot-scope="text, record">
          <span>{{ record.shift_period_time[1].after_time }}</span>
        </template>
        <template slot="plan3" slot-scope="text, record">
          <span>{{ record.shift_period_time[2].enable ? '√' : '×' }}</span>
        </template>
        <template slot="type3" slot-scope="text, record">
          <span>{{ record.shift_period_time[2].type_name }}</span>
        </template>
        <template slot="start3" slot-scope="text, record">
          <span>{{ record.shift_period_time[2].work_time }}</span>
        </template>
        <template slot="end3" slot-scope="text, record">
          <span>{{ record.shift_period_time[2].after_time }}</span>
        </template>
        <template slot="action" slot-scope="text, record">
          <a-button type="link" @click="openChangePlan(record)">修改班次</a-button>
        </template>
      </a-table>
    </div>
    <!-- 修改排班 -->
    <a-modal title="修改排班" :visible="visiblePlan" @cancel="handleCancelPlan">
      <a-form-model ref="form" :model="form">
        <a-form-model-item label="选择班次" :colon="false">
          <a-select v-model="form.class_key" @change="handleSelect">
            <a-select-option v-for="(item, key) of planList" :key="key" :value="key">
              {{key}}-{{ item }}
            </a-select-option>
          </a-select>
        </a-form-model-item>
      </a-form-model>
      <template slot="footer">
        <a-button @click="handleCancelPlan">取消</a-button>
        <a-button type="primary" @click="submitPlan">确定</a-button>
      </template>
    </a-modal>
  </div>
</template>

<script>
import { getPlan, getClassSelect, changePlan,getDepartmentList, getDatadictionary,delPlanApi } from '@/api/plan'
export default {
  computed: {
    hasSelected() {
      return this.selectedRowKeys.length > 0
    },
  },
  data () {
    const columns = [
      {
        title: '计划日期',
        dataIndex: 'plan_date',
        align: 'center',
        width: 120
      },
      {
        title: '姓名',
        dataIndex: 'person_name',
        align: 'center',
        width: 80
      },
      {
        title: '部门',
        dataIndex: 'department',
        align: 'center',
        width: 120
      },
      {
        title: '工种',
        dataIndex: 'work_type',
        align: 'center',
        width: 90
      },
      {
        title: '工号',
        dataIndex: 'work_number',
        align: 'center',
        width: 100
      },
      {
        title: '星期',
        dataIndex: 'week',
        align: 'center',
        scopedSlots: { customRender: 'week' },
        width: 60
      },
      {
        title: '班次名称',
        dataIndex: 'shift_name',
        align: 'center',
        width: 120
      },
      {
        title: '【启用-1',
        align: 'center',
        scopedSlots: { customRender: 'plan1' },
        width: 60
      },
      {
        title: '类型-1',
        align: 'center',
        scopedSlots: { customRender: 'type1' },
        width: 60
      },
      {
        title: '上班-1',
        align: 'center',
        scopedSlots: { customRender: 'start1' },
        width: 80
      },
      {
        title: '下班-1】',
        align: 'center',
        scopedSlots: { customRender: 'end1' },
        width: 80
      },
      {
        title: '【启用-2',
        align: 'center',
        scopedSlots: { customRender: 'plan2' },
        width: 60
      },
      {
        title: '类型-2',
        align: 'center',
        scopedSlots: { customRender: 'type2' },
        width: 60
      },
      {
        title: '上班-2',
        align: 'center',
        scopedSlots: { customRender: 'start2' },
        width: 80
      },
      {
        title: '下班-2】',
        align: 'center',
        scopedSlots: { customRender: 'end2' },
        width: 80
      },
      {
        title: '【启用-3',
        align: 'center',
        scopedSlots: { customRender: 'plan3' },
        width: 60
      },
      {
        title: '类型-3',
        align: 'center',
        scopedSlots: { customRender: 'type3' },
        width: 60
      },
      {
        title: '上班-3',
        align: 'center',
        scopedSlots: { customRender: 'start3' },
        width: 80
      },
      {
        title: '下班-3】',
        align: 'center',
        scopedSlots: { customRender: 'end3' },
        width: 80
      },
      {
        title: '操作',
        width: 120,
        align: 'center',
        scopedSlots: { customRender: 'action' }
      }
    ]
    return {
      form: {
        code: '',
        class_key: ''
      },
      search: {
        name: '',
        work_number: '',
        department: '',
        work_type: [],
        start_time: '',
        end_time: '',
        page_index: 1,
        page_size: 20,
        person_id: ''
      },
      columns,
      /* 分页参数 */
      pagination: {
        current: 1,
        pageSize: 20,
        showTotal: (total, range) => {
          return ' 共' + total + '条'
        },
        pageSizeOptions: ['10', '20', '30', '40', '50','100','500','1000'],
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0
      },
      selectedRowKeys: [],
      selectedRows: [],
      loading: false,
      visiblePlan: false,
      dataSource: [],
      planList: [],
      datadictionary: [],
      departmentList: [],
    }
  },
  mounted () {
    this.search.person_id = this.$route.query.person_id
    this.getPlanList()
    this.getDepartmentList()
    this.getDatadictionary()
    this.resize()
    window.addEventListener('resize', this.resize)
  },
  beforeDestroy () {
    window.removeEventListener('resize', this.resize)
  },
  methods: {
    async resize () {
      // this.getPageSize()
      await this.getTableData()
    },
    // 修改排班
    openChangePlan (item) {
      this.form.code = item.code
      this.visiblePlan = true
    },
    onChange (date, dateString) {
      this.search.start_time = dateString[0]
      this.search.end_time = dateString[1]
    },
    handleCancelPlan () {
      this.form.code = ''
      this.form.class_key = ''
      this.visiblePlan = false
      this.$refs.form.resetFields()
    },
    handleSelect (value) {
      this.form.class_key = value
    },
    onDel() {
        this.$confirm({
          title: '提示',
          content: '确定删除吗？',
          onOk: async () => {
            const { statusCode, errors } = await delPlanApi({
              ids: this.selectedRowKeys,
            })
            if (statusCode == 200) {
              this.$message.success('删除成功！')
              this.selectedRowKeys = []
              this.getTableData()
            } else {
              this.$message.error(errors)
            }
          },
        })
      },
    // 选择数据
    onSelectChange(selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectedRows = selectedRows
    },
    async submitPlan () {
      const { succeeded } = await changePlan(this.form)
      if (succeeded) {
        this.resize()
        this.$message.success('修改成功，请重新处理考勤数据！')
      } else {
         this.$message.error('操作失败！')
      }
      this.form.code = ''
      this.form.class_key = ''
      this.$refs.form.resetFields()
      this.visiblePlan = false
    },
    // 获取班次下拉框
    async getPlanList () {
      const { data } = await getClassSelect()
      this.planList = data
    },
    // 获取表格
    async getTableData (cur) {
      this.loading = true
      if (cur === 1) {
        this.search.page_index = cur
        this.pagination.current = cur
      } else {
        this.search.page_index = this.pagination.current
      }
      this.search.page_size = this.pagination.pageSize
      let work_types = this.search.work_type.join(',')
      const { data } = await getPlan({
        ...this.search,
        work_types
      })
      this.dataSource = data.items
      this.pagination.total = data.totalCount
      this.loading = false
    },
    getPageSize () {
      const height = this.$refs.main.offsetHeight - 68 - 30
      const pageSize = Math.floor(height / 50)
      this.search.page_size = pageSize
      this.pagination.pageSize = pageSize
    },
    handleTableChange (pagination, filters, sorter) {
      this.pagination = pagination
      this.getTableData()
    },
    // 获取部门列表
    async getDepartmentList () {
      const { data } = await getDepartmentList()
      this.departmentList = data
      this.departmentList.unshift({
        dep_name: "全部",
        pkey: ''
      })
    },
    // 获取工种
    async getDatadictionary () {
      const { data } = await getDatadictionary({ data_type: 3 })
      this.datadictionary = data
    },
  }
}
</script>

<style lang="less">
.common-wrapper {
  height: 100%;
  padding: 20px;
}
.common-search {
  padding-bottom: 10px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #efefef;
}
.common-main {
  height: calc(100% - 50px);
  padding-top: 10px;
  .ant-table .ant-btn {
    height: 24px;
    line-height: 24px;
  }
}
</style>
